<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" href="./css/iview.css1">
    <title>抽奖模拟器</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css" />
</head>

<body class="mdui-appbar-with-toolbar">

    <div class="mdui-appbar mdui-appbar-fixed mdui-color-teal">
        <div class="mdui-toolbar">
            <button mdui-drawer="{target: '#drawer',overlay:true}" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></button>
            <a href="index.html" class="mdui-typo-headline">抽奖模拟器</a>
            <a href="javascript:;" class="mdui-typo-title mdui-hidden-sm
                    mdui-hidden-xs"><small>今天也是非气满满呢^_^</small></a>
            <div class="mdui-toolbar-spacer"></div>
            <a href="https://github.com/zhengfan2014" target="_blank"
                class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '作者：zhengfan2014'}">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36"
                    enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon"
                    style="width: 24px;height:24px;">
                    <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
                            c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
                            c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
                            c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
                            c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
                            c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
                </svg>
            </a>

        </div>
    </div>
    <div class="mdui-row">
        <div class="mdui-col-sm-2">
        </div>
        <div class="mdui-col-sm-8">



            <div id="el" class="mdui-container-fluid">
                <div class="mdui-drawer mdui-drawer-close mdui-drawer-full-height mdui-color-white" id="drawer">
  <ul class="mdui-list">
    <li class="mdui-list-item mdui-ripple" @click="show('home')">
      <i class="mdui-icon material-icons" style="margin:0 10px">videogame_asset</i>
      <div class="mdui-list-item-content">首页</div>
    </li>
    <li class="mdui-subheader">游戏</li>
    <li v-for="(game,index) in jsonList" class="mdui-list-item mdui-ripple" @click="show(index)">
    <div class="mdui-list-item-avatar"><img :src="game.Avatar"/></div>
    <div class="mdui-list-item-content">{{game.Name}}</div>
  </li>

    
    <li class="mdui-subheader">工具</li>
    <a href="qiyuan.html" class="mdui-list-item mdui-ripple">
      <i class="mdui-icon material-icons" style="margin:0 10px">videogame_asset</i>
      <div class="mdui-list-item-content"> 祈愿计算器</div>
    </a>

  </ul>
</div>

                <h1>{{data.Title}}</h1>
                <img class="mdui-img-fluid" :src="data.PrizeImg" />
                <br>

                <div style="text-align:right;">
                    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-teal" @click="chou(1)"
                        mdui-dialog="{target: '#chouka'}">一发</button>
                    <button class="mdui-btn mdui-btn-raised" @click="chou(10)"
                        style="background-color: #4DB6AC;color:#fff;" mdui-dialog="{target: '#chouka'}">十发</button>

                </div>
                <div class="mdui-dialog" id="chouka">
                    <div class="mdui-dialog-title">祈愿结果</div>
                    <div class="mdui-dialog-content">
                        <ul class="mdui-list">
                            <li class="mdui-list-item mdui-ripple" v-for="prize in nowchoulist" :class="prize.Color">
                                <div class="mdui-list-item-avatar"><img :src="prize.Avatar" /></div>
                                <div class="mdui-list-item-content">{{prize.Name}}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="mdui-dialog-actions">
                        <button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
                    </div>
                </div>
                <br>
                <br>
                <h2>统计信息</h2>
                <div class="mdui-row">
                    <div class="mdui-col-xs-6">
                        <div class="mdui-card-primary">
                            <div class="mdui-card-primary-title"><i class="mdui-icon material-icons">poll</i>{{choushu}}
                            </div>
                            <div class="mdui-card-primary-subtitle">抽数</div>
                        </div>
                    </div>
                    <div class="mdui-col-xs-6">
                        <div class="mdui-card-primary">
                            <div class="mdui-card-primary-title"><i
                                    class="mdui-icon material-icons">monetization_on</i>{{rmb}}
                            </div>
                            <div class="mdui-card-primary-subtitle">消费(人民币)</div>
                        </div>
                    </div>
                </div>
                <h2>操作</h2>
                <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-indigo-accent"
                    mdui-dialog="{target: '#tishi'}" @click="History()">历史</button>
                <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-deep-purple"
                    mdui-dialog="{target: '#cangku'}" @click="Cangku()">仓库</button>
                <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-pink-accent"
                    mdui-dialog="{target: '#tishi'}" @click="Delete()">清空</button>

                <div class="mdui-dialog" id="cangku">
                    <div v-if="!data.Type" class="mdui-dialog-title">仓库</div>

                    <div v-if="data.Type" style="padding:0;" class="mdui-dialog-title">
                        <div class="mdui-tab" mdui-tab>
                            <a v-for="type in data.Type" :href="'#' + type" class="mdui-ripple">{{type}}</a>
                        </div>
                    </div>

                    <div class="mdui-dialog-content">
                        <div v-for="type in data.Type" :id="type" class="mdui-p-a-2">
                            <div class="mdui-row">
                                <div class="mdui-col-xs-6 mdui-col-sm-4 mdui-col-md-3" v-for="wupin in this.cangku[type]">
                                    <div class="mdui-card">
                                        <div class="mdui-card-media"><img class="mdui-img-rounded"
                                                :src="wupin.Avatar" />
                                            <div class="mdui-card-menu">
                                                <button
                                                    class="mdui-btn mdui-btn-icon mdui-text-color-white mdui-color-pink-accent">{{wupin.Number}}</button>
                                            </div>
                                        </div>
                                        <div class="mdui-card-content">
                                            <h4 style="text-align:center;margin:0;">{{wupin.Name}}</h4>
                                            <h4 style="text-align:center;margin:0;"><small>{{type}}</small>
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="this.cangku[type]==undefined" style="padding:24px;text-align:center;"><img src="img/error.png" /><br>你的仓库为空，快去抽奖吧</div>

                            </div>
                        </div>


                    </div>
                    <div class="mdui-dialog-actions">
                        <button class="mdui-btn mdui-ripple" mdui-dialog-close>ok</button>
                    </div>
                </div>




                <div class="mdui-dialog" id="tishi">
                    <div class="mdui-dialog-title">提示</div>
                    <div class="mdui-dialog-content">{{dialog}}</div>
                    <div class="mdui-dialog-actions">
                        <button class="mdui-btn mdui-ripple" mdui-dialog-close>ok</button>
                    </div>
                </div>
                <br>
                <br>
                <h2>模板作者</h2>
                <a style="text-decoration:none;" :href="data.Link">
                    <div class="mdui-card">

                        <!-- 卡片头部，包含头像、标题、副标题 -->
                        <div class="mdui-card-header">
                            <img class="mdui-card-header-avatar" :src="data.Avatar" />
                            <div class="mdui-card-header-title">{{data.Author}}</div>
                            <div class="mdui-card-header-subtitle">{{data.Description}}</div>
                        </div>
                    </div>

                </a>
                <!--<h2>评论区</h2>
                    <div class="mdui-typo">

                        <h3>喵喵喵</h3>

                    </div>-->



            </div>
            <br>
            <br>


        </div>
        <div class="mdui-col-sm-2">
        </div>
    </div>



    <style>
        .doc-footer-nav-text {
            box-sizing: border-box;
            display: inline-block;
            font-size: 20px;
            font-weight: 500;
            -webkit-font-smoothing: antialiased;
            height: 100%;
            line-height: 24px;
            padding-top: 24px;
            width: 100%;
            text-align: center;
        }

        .doc-footer-nav-text .doc-footer-nav-direction {
            font-size: 15px;
            line-height: 18px;
            margin-bottom: 1px;
            opacity: 0.55;
        }

        .doc-footer-nav {
            height: 130px;
        }
    </style>
    <div class="doc-footer-nav mdui-color-teal">
        <div class="mdui-container">
            <div class="mdui-row">
                <div class="doc-footer-nav-text">

                    <span class="doc-footer-nav-chapter">2021 抽奖模拟器</span>
                </div>
                <div class="doc-footer-nav-text">
                    <span class="doc-footer-nav-direction">最终解释权归 假面骑士02所有</span>
                </div>
            </div>
        </div>
    </div>






    <script src="js/public.js?version=1.0"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/iview.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        const vue = new Vue({
            el: "#el",
            data: {
                jsonList: JSONList,
                data: {},
                choushu: 0,
                rmb: 0,
                dialog: "",
                cangku:undefined,
                cangku1:{"角色":[
                    {
                        "Name":"地旅客",
                        "Avatar":"img/genshin/wiki/150px-翡玉法球.png",
                        "Number":6
                    }
                    ],
                    "武器":[]
                },
                nowchoulist: []
            },
            methods: {
                initChou() {
                    //console.log(this.data)
                    if (!localStorage["抽数"]) {
                        localStorage["抽数"] = 0;
                    }
                    if (!localStorage["消费"]) {
                        localStorage["消费"] = 0;
                    }
                    this.rmb = localStorage["消费"];
                    this.choushu = localStorage["抽数"];
                    if (this.data.Baodi == true) {
                        if (!localStorage["保底"]) {
                            var baodidict = {};
                            for (var i = 0; i < this.data.BaodiList.length; i++) {
                                baodidict[this.data.BaodiList[i].Name] = 0
                            }
                            localStorage["保底"] = JSON.stringify(baodidict);
                        } else {
                            console.log(JSON.parse(localStorage["保底"]));
                        }

                        //for (var i = 0; i < this.data.BaodiList.length; i++){
                        //    localStorage["保底"]
                        //}
                    }
                    if(!localStorage["仓库"]){
                        var cangkudict = {"角色":undefined,"武器":undefined};
                        //for (var j = 0; j < this.data.Type.length; j++) {
                        //    cangkudict[this.data.Type[j]] = undefined;
                        //}
                        localStorage["仓库"] = JSON.stringify(cangkudict);
                    }
                    cangku = JSON.parse(localStorage["仓库"]);
                    console.log(this.cangku)
                    //mdui初始化
                    mdui.mutation();
                },
                chou: function (num) {
                    console.log(num);
                    var cishu = 0;
                    this.nowchoulist = []
                    if (this.data.Baodi == true) {
                        console.log("保底")
                    }
                    while (cishu < num) {
                        cishu++;
                        var prizename = "";
                        var prizeimg = "";
                        var prizetype = "";
                        var prizecolor = "";
                        randomnum = Math.random();
                        for (var i = 0; i < this.data.Prize.length; i++) {
                            if (i == 0 && randomnum <= this.data.Prize[i].Probability) {
                                //如果列表存在，
                                if (this.data.Prize[i].PrizeList) {
                                    //均衡获取0-(n-1)的随机数
                                    var randomint = Math.floor(Math.random() * this.data.Prize[i].PrizeList.length);
                                    prizename = this.data.Prize[i].PrizeList[randomint].Name;
                                    prizeimg = this.data.Prize[i].PrizeList[randomint].Avatar;
                                    //判断类型是否存在
                                    if (this.data.Prize[i].PrizeList[randomint].Type) {
                                        prizetype = this.data.Prize[i].PrizeList[randomint].Type;
                                    }
                                    //判断是否加了颜色
                                    if (this.data.Prize[i].Style) {
                                        prizecolor = this.data.Prize[i].Style;
                                    }
                                    //判断是否加了回调
                                    if (this.data.Prize[i].CallBack) {
                                        var baodi = JSON.parse(localStorage["保底"]);
                                        baodi[this.data.Prize[i].CallBack] = 0;
                                        localStorage["保底"] = JSON.stringify(baodi);
                                    }
                                }
                                else {
                                    prizename = this.data.Prize[i].Name;
                                    prizeimg = this.data.Prize[i].Avatar;
                                    //判断类型是否存在
                                    if (this.data.Prize[i].Type) {
                                        prizetype = this.data.Prize[i].Type;
                                    }
                                    //判断是否加了颜色
                                    if (this.data.Prize[i].Style) {
                                        prizecolor = this.data.Prize[i].Style;
                                    }
                                    //判断是否加了回调
                                    if (this.data.Prize[i].CallBack) {
                                        var baodi = JSON.parse(localStorage["保底"]);
                                        baodi[this.data.Prize[i].CallBack] = 0;
                                        localStorage["保底"] = JSON.stringify(baodi);
                                    }
                                }
                            }
                            else if (randomnum <= this.data.Prize[i].Probability && randomnum > this.data.Prize[i - 1].Probability) {
                                //如果列表存在，
                                if (this.data.Prize[i].PrizeList) {
                                    //均衡获取0-(n-1)的随机数
                                    var randomint = Math.floor(Math.random() * this.data.Prize[i].PrizeList.length);
                                    prizename = this.data.Prize[i].PrizeList[randomint].Name;
                                    prizeimg = this.data.Prize[i].PrizeList[randomint].Avatar;
                                    //判断类型是否存在
                                    if (this.data.Prize[i].PrizeList[randomint].Type) {
                                        prizetype = this.data.Prize[i].PrizeList[randomint].Type;
                                    }
                                    //判断是否加了颜色
                                    if (this.data.Prize[i].Style) {
                                        prizecolor = this.data.Prize[i].Style;
                                    }
                                    //判断是否加了回调
                                    if (this.data.Prize[i].CallBack) {
                                        var baodi = JSON.parse(localStorage["保底"]);
                                        baodi[this.data.Prize[i].CallBack] = 0;
                                        localStorage["保底"] = JSON.stringify(baodi);
                                    }
                                }
                                else {
                                    prizename = this.data.Prize[i].Name;
                                    prizeimg = this.data.Prize[i].Avatar;
                                    //判断类型是否存在
                                    if (this.data.Prize[i].Type) {
                                        prizetype = this.data.Prize[i].Type;
                                    }
                                    //判断是否加了颜色
                                    if (this.data.Prize[i].Style) {
                                        prizecolor = this.data.Prize[i].Style;
                                    }
                                    //判断是否加了回调
                                    if (this.data.Prize[i].CallBack) {
                                        var baodi = JSON.parse(localStorage["保底"]);
                                        baodi[this.data.Prize[i].CallBack] = 0;
                                        localStorage["保底"] = JSON.stringify(baodi);
                                    }
                                }
                            }
                        }
                        if (this.data.BaodiList) {
                            var baodi = JSON.parse(localStorage["保底"]);
                            for (var h = 0; h < this.data.BaodiList.length; h++) {
                                baodi[this.data.BaodiList[h].Name]++;
                                //判断是否是保底的倍数
                                if (baodi[this.data.BaodiList[h].Name] % this.data.BaodiList[h].Frequency == 0 && baodi[this.data.BaodiList[h].Name] != 0) {
                                    var prizeint = this.data.BaodiList[h].Range[Math.floor(Math.random() * this.data.BaodiList[h].Range.length)];
                                    var randomint = Math.floor(Math.random() * this.data.Prize[prizeint].PrizeList.length);
                                    prizename = this.data.Prize[prizeint].PrizeList[randomint].Name;
                                    prizeimg = this.data.Prize[prizeint].PrizeList[randomint].Avatar;
                                    //判断类型是否存在
                                    if (this.data.Prize[prizeint].PrizeList[randomint].Type) {
                                        prizetype = this.data.Prize[prizeint].PrizeList[randomint].Type;
                                    }
                                    //判断是否加了颜色
                                    if (this.data.Prize[prizeint].Style) {
                                        prizecolor = this.data.Prize[prizeint].Style;
                                    }
                                    baodi[this.data.BaodiList[h].Name] = 0;
                                }
                            }
                            localStorage["保底"] = JSON.stringify(baodi);
                        }
                        //
                        localStorage["抽数"]++;
                        localStorage["消费"] = localStorage["抽数"] * this.data.Rmb;
                        
                        

                        console.log("第" + cishu + "发 :" + prizename);
                        var pushdict = { "Name": prizename, "Avatar": prizeimg }
                        if (prizetype != "") {
                            pushdict["Type"] = prizetype;
                            var cangkudict = JSON.parse(localStorage["仓库"]);
                            var haswupin = false;
                            if(cangkudict[prizetype]==undefined){
                                cangkudict[prizetype] = [];
                            }else{
                                for (var k = 0; k < cangkudict[prizetype].length; k++){
                                    if(cangkudict[prizetype][k].Name==prizename){
                                        cangkudict[prizetype][k].Number++;
                                        haswupin = true;
                                    }
                                }
                            }
                            
                            if(!haswupin){
                                cangkudict[prizetype].push({"Name":prizename,"Avatar":prizeimg,"Number":1})
                            }
                            console.log(cangkudict)
                            cangku = cangkudict;
                            localStorage["仓库"] = JSON.stringify(cangkudict);
                        }
                        if (prizecolor != "") {
                            pushdict["Color"] = prizecolor;
                        }
                        this.nowchoulist.push(pushdict)
                        console.log(this.nowchoulist);
                    }
                    this.choushu = localStorage["抽数"];
                    this.rmb = localStorage["消费"];
                    //mdui初始化
                    mdui.mutation();
                },
                Delete: function () {
                    localStorage.removeItem("保底");
                    localStorage.removeItem("抽数");
                    localStorage.removeItem("消费");
					localStorage.removeItem("仓库");
                    this.dialog = "清除成功";
                    this.initChou();
                },
                History:function(){
                    this.dialog = "施工中";
                },
                Cangku:function(){
                    var cangkudict = JSON.parse(localStorage["仓库"]);
                    cangku = cangkudict;
                    console.log(cangkudict)
                    //mdui初始化
                    mdui.mutation();
                },
                show:function(id){
                    
                    if(id=="home"){
                        sessionStorage.isHome = true;
                        sessionStorage.isGame = false;
                        //console.log(this.jsonList);
                    }else{
                        sessionStorage.isHome = false;
                        sessionStorage.isGame = true;
                        sessionStorage.isGameId = parseInt(id);
                    }
                    window.location.href = "./index.html"
                }
            },
            created() {
                if (!sessionStorage.file) {
                    window.location.href = "index.html"
                }
                axios.get('json/' + sessionStorage.file)
                    .then((response) => {
                        this.data = response.data;


                        //初始化
                        this.initChou();
                    })
                    .catch(function (error) {
                        mdui.snackbar({ message: '发生错误！' });
                    });
            }
        })
    </script>
    <script src="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>
</body>

</html>